<template>
  <div>
    <br />
    <div class="inputing">
      <el-input
        placeholder="请输入内容"
        v-model="selectInfo.input3"
        class="input-with-select"
      >
        <el-select
          v-model="selectInfo.select1"
          slot="prepend"
          placeholder="请选择"
        >
          <el-option label="寄件人手机号" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="收件人手机号" value="3"></el-option>
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="logisticsSelect"
        ></el-button>
      </el-input>
    </div>
    <div>
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="selectInfo.checkAll"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <div style="margin: 15px 0"></div>
      <el-checkbox-group
        v-model="selectInfo.checkedCities"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox v-for="city in cities" :label="city" :key="city">{{
          city
        }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <br />
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="下单时间" width="200">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.orderTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号" width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.orderNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="收件人" width="150">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.recipientName }}</p>
            <p>手机号: {{ scope.row.recipient }}</p>
            <p>地区: {{ scope.row.recipientArea }}</p>
            <p>详细住址: {{ scope.row.recipientAddress }}</p>

            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.recipientName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.orderStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单金额/元" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.paymentAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit1(scope.$index, scope.row)"
            >查看</el-button
          >
          <el-button size="mini" @click="handleEdit2(scope.$index, scope.row)"
            >修改状态</el-button
          >
          <el-button size="mini" @click="handleEdit3(scope.$index, scope.row)"
            >支付</el-button
          >
          <el-dialog
            title="下一站点"
            :visible.sync="dialogVisible1"
            width="50%"
          >
            <area-map :numberValidateForm="tableData[indexs]" @addresschange="addresschange" />
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible1 = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisiblem()"
                >确 定</el-button
              >
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :page-size="6"
        layout="prev, pager, next"
        @current-change="currentchange"
        :total="total"
      >
      </el-pagination>
      <el-dialog title="订单状态修改" :visible.sync="dialogVisible" width="30%">
        <el-radio v-model="radio" label="在库">在库</el-radio>
        <el-radio v-model="radio" label="出库">出库</el-radio>
        <el-radio v-model="radio" label="送达">送达</el-radio>
        <el-radio v-model="radio" label="丢失">丢失</el-radio>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisibleme()">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { ViewLogisticAPI } from "@/request/api";
import { PayAPI } from "@/request/api";
import { StateAPI } from "@/request/api";
import AreaMap from "./AreaMap.vue";
import { NextStationAPI } from "@/request/api";
const cityOptions = [
  "待支付",
  "已支付",
  "入库",
  "在库",
  "出库",
  "丢失",
  "送达",
  "签收",
];
export default {
  components: { AreaMap },

  data() {
    return {
      value1: "",
      msg: "",
      dialogVisible1: false,
      radio: "待支付",
      indexs: "",
      dialogVisible: false,
      selectInfo: {
        input3: "",
        select1: "",
        checkAll: false,
        checkedCities: [],
        pageNumber: 1,
      },

      tableData: [
        {
          orderTime: "",
          recipientName: "",
          orderStatus: "",
          paymentAmount: "",
          logisticscompany: "",
          orderNumber: "",
          recipientAddress: "",
          recipientArea: "",
          recipient: "",
          senderArea:"",
          routeArea:"",
        },
      ],

      total: 0,
      cities: cityOptions,
      isIndeterminate: true,
      logisticsArea: {
        routeArea: "",
        orderNumber: "",
      },
    };
  },
  methods: {
    addresschange(value1) {
      this.value1 = value1;
    },
    dialogVisiblem() {
      if(this.tableData[this.indexs].orderStatus=="已支付"||this.tableData[this.indexs].orderStatus=="出库"){
              (this.logisticsArea.routeArea = this.value1),
        (this.logisticsArea.orderNumber = this.msg);
      this.dialogVisible1 = false;
      NextStationAPI(this.logisticsArea).then((res) => {
        console.log(res);
      });
      }else{
                this.$message({
          type: "error",
          message: "物品未交付或者未出库，不能前往下一站",
        });
      }

    },
    dialogVisibleme() {
      this.dialogVisible = false;
      this.tableData[this.indexs].orderStatus = this.radio;
      StateAPI(this.tableData[this.indexs]).then((res) => {
        console.log(res);
        this.$message({
          type: "success",
          message: "物件" + this.radio,
        });
      });
    },
    logisticsSelect() {
      console.log(this.selectInfo.input3);
      console.log(this.selectInfo.select1);
      ViewLogisticAPI(this.selectInfo).then((res) => {
        this.tableData = res.data.data.rows;
        this.total = res.data.data.total;
      });
    },
    handleEdit1(index, row) {
            this.$router.push({
        path: "/logisticsMap",
        query: {
          numberValidateForm: row,
          routers: "/logisticsState",
        },
      });
    },
    handleEdit2(index, row) {
      console.log(index, row);
      this.dialogVisible = true;
      this.indexs = index;
    },

    handleEdit3(index, row) {
      console.log(index, row);
      if(row.orderStatus!="待支付"){
          this.$message({
            type: "info",
            message: "该订单已经支付过了",
          });
      }else{

      
      this.$prompt("请输入支付金额", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/,
        inputPlaceholder: "0.00",
        inputErrorMessage: "输入格式不正确",
      })
        .then(({ value }) => {
          this.tableData[index].paymentAmount = value;
          console.log(this.tableData[index]);
          this.tableData[index].orderStatus="已支付"
          PayAPI(this.tableData[index]).then((res) => {
            console.log(res);
            this.$message({
              type: "success",
              message: "已支付: " + value,
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消支付",
          });
        });
    }
    },
    currentchange(value) {
      this.selectInfo.pageNumber = value;
      ViewLogisticAPI(this.selectInfo).then((res) => {
        this.tableData = res.data.data.rows;
        this.total = res.data.data.total;
      });
    },
    handleCheckAllChange(val) {
      this.selectInfo.checkedCities = val ? cityOptions : [];
      this.isIndeterminate = false;
      console.log(val);
      ViewLogisticAPI(this.selectInfo).then((res) => {
        this.tableData = res.data.data.rows;
        this.total = res.data.data.total;
      });
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.selectInfo.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
      ViewLogisticAPI(this.selectInfo).then((res) => {
        this.tableData = res.data.data.rows;
        this.total = res.data.data.total;
      });
    },
  },

  created() {
    ViewLogisticAPI(this.selectInfo).then((res) => {
      this.tableData = res.data.data.rows;
      this.total = res.data.data.total;
    });
  },
};
</script>
<style>
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.inputing {
  width: 40%;
  margin: 0 auto;
}
</style>